<template>
    <div>
        <pre>{{valueString}}</pre>
    </div>
</template>

<script>
export default {
    name: 'VoDragFormJsonDisplayer',
    props: {
        value: {}
    },
    computed: {
        valueString() {
            return JSON.stringify(this.value, null, 2)
        }
    }
}
</script>

<style scoped>
pre{
    font-size: 12px;
    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    color: #444;
    margin: 15px auto;
    padding: 20px 10px;
    border-left: 8px solid #90CAF9;
    background: #fff url() repeat;
    white-space: pre-wrap;
    word-wrap: break-word;
    letter-spacing: 1.2px;
    line-height: 22.3px;
    background-size: 100% 44px;
}
</style>
